<template>
  <div>
    <!--双向绑定 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" />

<!--    这段代码是使用 Vant UI 组件库中的 `van-search` 组件，用于实现搜索框功能。-->

<!--    其中，`v-model="value"` 表示将搜索框的值与名为 `value` 的变量进行双向绑定，
即当用户在搜索框中输入内容时，`value` 变量的值会自动更新为输入的内容；反之，当 `value` 变量的值发生变化时
，搜索框的内容也会相应地更新。-->

<!--    `placeholder="请输入搜索关键词"` 表示搜索框的占位符文本为 "请输入搜索关键词"，
即当搜索框为空时显示的提示信息。-->


//轮播图
    <div style="padding: 20px">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
        <van-swipe-item>
          <div><img :src="swipe" style="width: 100%" /></div>
        </van-swipe-item>
      </van-swipe>
    </div>
<!--    这段代码是使用 Vant UI 组件库中的 `van-swipe` 组件，用于实现轮播图功能。-->

<!--    其中，`<div style="padding: 20px">` 表示在轮播图的外部容器中添加一个内边距为 20px 的样式。-->

<!--    `<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">`-->
<!--      表示创建一个名为 "my-swipe" 的轮播图组件，并设置自动播放时间为 3000 毫秒（即 3 秒），指示器颜色为白色。-->

<!--      `<van-swipe-item>` 表示轮播图中的每个子项，这里共有四个子项。-->

<!--        `<div><img : style="width: 100%" /></div>` -->
<!--        表示每个子项中包含一个图片，图片的宽度设置为 100%。-->



    <div style="padding: 0 20px">独家销售</div>
    <div
        style="
        padding: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      "
    >
      <!-- 点击事件 .stop防止冒泡-->
      <div
          v-for="(i, index) in products.obj"
          :key="index"
          style="
          width: 35%;
          margin-bottom: 20px;
          border: 1px solid #e3e3e3;
          border-radius: 10px;
          background: #fff;
          padding: 20px;
          text-align: center;
        "
          @click.stop="gotoProductInfo(i, index)">

<!--        这段代码是使用 Vue.js 框架中的 `v-for` 指令，用于循环渲染一个数组（`products.obj`）中的元素。-->

<!--        其中，`:key="index"` 表示为每个元素设置唯一的 key 值，这里使用的是元素的索引值。-->

<!--        `style` 属性用于设置元素的样式，包括宽度、外边距、边框、背景色、内边距和文本对齐方式等。-->

<!--        `@click.stop` 是一个事件监听器，当用户点击该元素时，会触发 `gotoProductInfo(i, index)` 方法，-->


        <div><img :src="i.img" style="height: 100px" /></div>

        <div style="text-align: left">{{ i.name }}</div>
<!--        这段代码是使用 Vue.js 框架中的插值表达式，用于将变量 `i.name` 的值渲染到 HTML 中。-->

<!--        其中，`{{ i.name }}` 是一个插值表达式，表示将变量 `i.name` 的值插入到该位置。-->

<!--        `style="text-align: left"` 表示将文本左对齐显示。-->
        <div
            style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >
          <span>{{ i.unit }}{{ i.price }}</span>
<!--          这段代码是使用 Vue.js 框架中的插值表达式，用于将变量 `i.unit` 和 `i.price` 的值渲染到 HTML 中。-->

<!--          其中，`{{ i.unit }}` 和 `{{ i.price }}` 都是插值表达式，表示将变量 `i.unit` 和 `i.price` 的值插入到该位置。-->

<!--          `<span>` 标签用于包裹这两个插值表达式，以便对它们进行样式设置或添加其他属性。-->
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>

    <div style="padding: 0 20px"><h4>热门销售</h4></div>

    <div
        style="
        padding: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 20px;
      "
    >
      <div
          v-for="(i, index) in hot_products"
          :key="index"
          style="
          width: 35%;
          margin-bottom: 20px;
          border: 1px solid #e3e3e3;
          border-radius: 10px;
          background: #fff;
          padding: 20px;
          text-align: center;
        "
          @click.stop="gotoProductInfo(i, index)"
      >
        <div><img :src="i.img" style="width: 120px; height: 120px" /></div>
        <div style="text-align: left">{{ i.name }}</div>
        <div
            style="
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
          "
        >
          <span>{{ i.unit }}{{ i.price }}</span>
          <span @click.stop="addCart(i, index)" class="plus-product">+</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { storeToRefs } from "pinia";
import { myMixin } from "./../mixin.js";


const { errorMsgBox, successMsgBox, apiAll, withLoading } = myMixin();
const useUserStore = userStore();
const router = useRouter();


// 1. `import { ref, reactive, onMounted } from "vue";`：
// 从 Vue.js 中导入了 `ref`、`reactive` 和 `onMounted` 三个函数。这些函数用于创建响应式数据、处理组件生命周期等。
//
// 2. `import { useRouter } from "vue-router";`：从 Vue Router 中导入了 `useRouter` 函数。这个函数用于在 Vue.js 组件中使用路由功能。
//
// 3. `import { showDialog } from "vant";`：从 Vant UI 库中导入了 `showDialog` 函数。这个函数用于显示对话框。
//
// 4. `import { userStore } from "../store/piniaStore";`：从 Pinia 状态管理库中导入了 `userStore`
// 对象。Pinia 是一个轻量级的状态管理库，用于在 Vue.js 应用程序中管理全局状态。
//
// 5. `import { storeToRefs } from "pinia";`：从 Pinia 中导入了 `storeToRefs` 函数。这个函数用于将 Pinia store 中的 state 转换为响应式的引用。
//
// 6. `import { myMixin } from "./../mixin.js";`：从当前目录下的 `mixin.js` 文件中导入了一个名为 `myMixin`
// 的对象。这个对象可能包含一些自定义的混入（mixin）方法，用于复用代码逻辑。
//
// 7. `const { errorMsgBox, successMsgBox, apiAll, withLoading } = myMixin();`：从 `myMixin`
// 对象中解构出四个方法：`errorMsgBox`、`successMsgBox`、`apiAll` 和 `withLoading`。这些方法可能是用于显示错误消息框、成功消息框、处理 API 请求和加载动画等功能。
//
// 8. `const useUserStore = userStore();`：调用 `userStore` 函数并将返回的对象赋值给 `useUserStore`
// 变量。这里可能是为了获取 Pinia store 的实例。
//
// 9. `const router = useRouter();`：调用 `useRouter` 函数并将返回的对象赋值给 `router` 变量。



let swipe = new URL(`../assets/swipe.png`, import.meta.url).href;

//vue3 生命周期
onMounted(() => {
  //getProducts();
  //addProducts();
});

let active = ref("home");
let products = useUserStore.products;
//let products = reactive({ obj: [] });
//pinia 仓库里面的数据  进行渲染
let hot_products = useUserStore.hot_products;
let cartList = useUserStore.cartList;


// 1. `let swipe = new URL(`../assets/swipe.png`, import.meta.url).href;`：这行代码创建了一个 URL 对象，表示一个图片文件的路径。`import.meta.url` 是当前模块的 URL，`new URL()` 用于解析相对路径，最后将解析后的绝对路径赋值给变量 `swipe`。
//
// 2. `onMounted(() => { /* ... */ });`：这是一个 Vue 3 的生命周期钩子函数，当组件挂载到 DOM 上时会被调用。在这个钩子函数中，可以执行一些初始化操作，例如获取产品数据或添加产品等。
//
// 3. `let active = ref("home");`：这行代码定义了一个响应式引用变量 `active`，并将其初始值设置为字符串 "home"。在 Vue 3 中，可以使用 `ref()` 函数来创建一个响应式引用。
//
// 4. `let products = useUserStore.products;`：这行代码从 Pinia 状态管理库中获取名为 `useUserStore` 的 store，并从中获取 `products` 属性的值。Pinia 是一个轻量级的状态管理库，用于在 Vue.js 应用程序中管理全局状态。
//
// 5. `let hot_products = useUserStore.hot_products;`：这行代码从 `useUserStore` store 中获取 `hot_products` 属性的值。
//
// 6. `let cartList = useUserStore.cartList;`：这行代码从 `useUserStore` store 中获取 `cartList` 属性的值。

function gotoIndex() {
  router.push("index");
}
function gotoSearch() {
  router.push("search");
}
// 这是两个JavaScript函数，它们用于在前端路由中导航到不同的页面。
//
// `gotoIndex()`函数的作用是将用户导航到名为"index"的页面。
// 它通过调用`router.push("index")`实现，其中`router`是一个前端路由库（如Vue Router或React Router）的实例，`push`方法用于导航到指定的路由。
//
// `gotoSearch()`函数的作用是将用户导航到名为"search"的页面。
// 它通过调用`router.push("search")`实现，同样使用`router`实例和`push`方法进行导航。



//新增商品接口
//添加购物车 修改购物车信息，响应式
async function getProducts() {
  let data = {};
  const res = await withLoading(
      apiAll(data, "http://localhost:3000/goods/getGoods")
  );
  products.obj = res;
}

// 这是一个名为`getProducts`的异步函数，它的作用是获取商品数据。
//
// 首先，定义一个空对象`data`，用于存储请求参数。然后，调用`withLoading`函数并传入`apiAll(data, "http://localhost:3000/goods/getGoods")`作为参数。`withLoading`函数可能是一个用于显示加载动画的函数，而`apiAll`函数可能是一个用于发送API请求的函数。这里将`data`和API地址作为参数传递给`apiAll`函数。
//
// 接下来，使用`await`关键字等待`withLoading`函数的执行结果，并将结果赋值给常量`res`。由于`withLoading`函数可能是一个返回Promise对象的函数，因此需要使用`await`关键字来等待其执行完成。
//
// 最后，将`res`赋值给`products.obj`，可能是将获取到的商品数据存储在`products`对象的`obj`属性中。




function addCart(i, index) {
  document.querySelectorAll(".plus-product")[index].classList.add("scale");
  setTimeout(() => {
    document.querySelectorAll(".plus-product")[index].classList.remove("scale");
  }, 300);
  if (!i.num) {
    i.num = 1;
  }
  i.totalPrice = i.price;
  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == i.id) {
      cartProduct.num += 1;
      cartProduct.totalPrice = cartProduct.num * i.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(i);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}

// 这段代码是一个名为`addCart`的函数，它接受两个参数：`i`和`index`。这个函数的主要功能是将一个产品添加到购物车中。
//
// 1. 首先，通过`document.querySelectorAll(".plus-product")[index]`选择页面上的一个元素，并为其添加一个名为"scale"的类，使其产生缩放效果。然后使用`setTimeout`函数在300毫秒后移除这个类，恢复原始状态。
//
// 2. 接下来，检查传入的产品对象`i`是否有`num`属性，如果没有，则将其设置为1。然后将产品的单价赋值给`totalPrice`属性。
//
// 3. 然后，遍历购物车列表`cartList`，检查是否已经存在具有相同`id`的产品。如果存在，则将该产品的数量加1，并重新计算总价。如果不存在，则将该产品添加到购物车列表中。
//
// 4. 调用`useUserStore.calcluteCart()`方法重新计算购物车的总价。
//
// 5. 最后，显示一个成功消息框，提示用户产品已成功添加到购物车。
function gotoProductInfo(i, index) {
  if (!i.num)
  { i.num = 1;}
  i.totalPrice = i.num * i.price;
  window.localStorage.setItem("currentProductIndex", index);
  window.localStorage.setItem("lastPage", "index");
  router.push("productInfo");
}
// 这段代码是一个名为`gotoProductInfo`的函数，它接受两个参数：`i`和`index`。
//
// 该函数的作用是将当前产品的信息存储到本地存储中，并将页面跳转到"productInfo"路由。
//
// 具体来说，函数首先检查传入的产品对象`i`是否有`num`属性，如果没有则将其设置为1。然后计算产品的总价，将结果赋值给`totalPrice`属性。接下来，使用`window.localStorage.setItem()`方法将当前产品的索引值存储到本地存储中的
// "currentProductIndex"键下，同时将上一页的名称存储到"lastPage"键下。最后，
// 通过调用`router.push()`方法将页面跳转到"productInfo"路由。
</script>
